---
slug: /plugins/list
title: List
---

### `createListPlugin`

```ts live
() => {
  const ToolbarButtonsList = () => {
    const editor = useStoreEditorRef(useEventEditorId('focus'));

    return (
      <>
        <ToolbarList
          type={getPlatePluginType(editor, ELEMENT_UL)}
          icon={<FormatListBulleted />}
        />
        <ToolbarList
          type={getPlatePluginType(editor, ELEMENT_OL)}
          icon={<FormatListNumbered />}
        />
      </>
    );
  };

  const plugins = [
    ...pluginsBasic,
    createTodoListPlugin(),
    createSoftBreakPlugin(optionsSoftBreakPlugin),
    createExitBreakPlugin(optionsExitBreakPlugin),
    createResetNodePlugin(optionsResetBlockTypePlugin),
    createListPlugin(),
  ];

  return (
    <>
      <HeadingToolbar>
        <ToolbarButtonsList />
      </HeadingToolbar>
      <Plate
        id="list"
        plugins={plugins}
        components={components}
        options={options}
        editableProps={editableProps}
        initialValue={initialValueList}
      />
    </>
  );
}
```